<template>
  <div>
    <h2>事件绑定指令</h2>
    <p>{{ age }}</p>
    <!-- 事件绑定指令语法 v-on: 事件名='处理程序' v-on:可以简写成@ -->
    <!-- <button v-on:事件名="处理程序;">按钮</button>
    <button @:事件名="处理程序;">按钮</button> -->

    <!-- 事件处理程序,如果代码非常简单,直接写到<template>这个区域即可 -->
    <!-- 处理程序: 代码只能使用vue中定义好的data数据或methods方法 -->
    <button @click="age++">+1</button>

    <!-- 事件处理程序,如果代码非常多,可以用方法,方法必须定义到和data平级的methods中 -->
    <button @click="changeAge">按钮</button>
  </div>
</template>

<script>
export default {
  //data是存储数据的
  data() {
    return {
      age: 20,
    };
  },
  //methods是存储方法的
  methods: {
    changeAge() {
      //vue中,找data数据,method方法...都是通过this直接找[这是vue中固定的语法]
      this.age--;
      console.log(123);
    },
  },
};
</script>

<style>
</style>